<template>
  <div class="h-100 f f-col">
    <el-page-header
        @back="goBack"
        :content="this.$store.state.titleName"
        class="f-16 p-20"
      ></el-page-header>
    <div class="h-100 p-b-50 o-y-auto">
    <el-row :gutter="20" class="w-100">
      <el-col :xs="0" :sm="2">&nbsp;</el-col>
      <el-col :xs="24" :sm="22">
          <div class="p-t-50">
            <el-form ref="form" :model="form" label-width="80px">
              <!-- <el-form-item label="使用模板" v-if="show.show1">
                <el-switch style="max-width:380px;" v-model="templent" @change="setTemplent"></el-switch>
                <em class="m-l-10 f-12 c999">Tips：使用模板后，文章内容将不被显示，栏目将展示静态模板网页，请确保模板网页一定存在</em>
              </el-form-item>
              <el-form-item label="模板名称" v-show="templent">
                <el-input v-show="templent" style="max-width:300px;" v-model="form.t1" placeholder="请输入模板名 例:case.html"></el-input>
              </el-form-item> -->
              <el-form-item :label="templent?'网页标题':'标题'" v-if="show.show2 || templent">
                <el-input style="max-width:380px;" v-model="form.t2"></el-input>
              </el-form-item>
              <el-form-item label="内容简述" v-if="show.show3">
                <el-input style="max-width:380px;" v-model="form.t3"></el-input>
              </el-form-item>
              <el-form-item label="排序号" v-if="show.show4" v-show="!templent">
               <el-input style="max-width:380px;" v-model="form.t4"></el-input>
              </el-form-item>
              <el-form-item label="发布时间"  v-if="show.show5">
                  <el-date-picker style="max-width:380px;width:100%;" type="date" placeholder="选择日期" v-model="form.t5"></el-date-picker>
              </el-form-item>
              <el-form-item label="文章来源" v-if="show.show6">
                <el-input style="max-width:380px;" v-model="form.t6"></el-input>
              </el-form-item>
              <el-form-item label="阅读量" v-if="show.show7">
                <el-input style="max-width:380px;" v-model="form.t7"></el-input>
              </el-form-item>
              <el-form-item label="首页显示" v-if="show.show8">
                <el-switch style="max-width:380px;" v-model="form.t8"></el-switch>
              </el-form-item>
              <el-form-item label="上传图片" v-if="show.show9">
                <div class="f f-wrap">
                <div v-for="(item,index) in form.t9" :key="index" style="width:240px;height:100px;border:1px solid #dedede" class="img-cover r-10 o-hide m-10 rel">
                    <img :src="item" width="100%" height="100%">
                    <el-button style="margin-left:100px;margin-top:25px;" class="abs t-0 l-0" type="danger" icon="el-icon-delete" circle @click="delectImg1(index)"></el-button>
                  </div>
                <div v-if="form.t9.length<20" class="r-10 f j-c a-c c999 c-p o-hide rel m-10" style="width:240px;height:100px;border:1px solid #dedede;"><em>点击上传LOGO<input class="abs w-100 h-100 abs-0 o-0 c-p" type="file" @change="handleFileChange1" /></em></div>
                </div>
                  <p class="c999">* 第一张默认为缩略图，鼠标右键复制图片后可粘贴到文章内容中。</p>
              </el-form-item>
              <el-form-item label="文章内容"  v-if="show.show10" v-show="!templent">
                <div id="editor" style="width:1024px"></div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">确认保存</el-button>
                <el-button type="primary" @click="delect">删除</el-button>
              </el-form-item>
            </el-form>
          </div>
      </el-col>
    </el-row>

    </div>

  </div>
</template>

<script>
import {
    addArticle,
    queryArticle,
    editArticle,
    delectArticle,
    queryTwoColumn
} from "../http/api";
import E from "wangeditor";
export default {
    name: "editCont",
    data() {
        return {
            templent: false,

            form: {
                t1: "",
                t2: "",
                t3: "",
                t4: "0",
                t5: new Date(),
                t6: "超级管理员",
                t7: "0",
                t8: false,
                t9: [],
                id: ""
            },
            show: {
                show1: false,
                show2: false,
                show3: false,
                show4: false,
                show5: false,
                show6: false,
                show7: false,
                show8: false,
                show9: false,
                show10: false
            },
            editor: ""
        };
    },
    created() {
        if (!this.$store.state.isadd) {
            this.queryArticle();
        }
        this.init();
    },
    mounted() {
        console.log(11111)
        this.editor = new E("#editor");
        this.editor.customConfig.zIndex = 0;
        this.editor.create();

    },
    methods: {
        init() {
            if (this.$store.state.navId == "1" || this.$store.state.navId == "8") {
                this.show.show1 = true;
                this.show.show10 = true;
                this.show.show9 = true;
            }
            if (
                this.$store.state.navId == "2" ||
                this.$store.state.navId == "3" ||
                this.$store.state.navId == "4" ||
                this.$store.state.navId == "5"
            ) {
                this.show.show2 = true;
                this.show.show3 = true;
                this.show.show4 = true;
                this.show.show5 = true;
                this.show.show6 = true;
                this.show.show7 = true;
                this.show.show8 = true;
                this.show.show9 = true;
                this.show.show10 = true;
            }
            if (this.$store.state.navId == "6") {
                this.show.show10 = true;
            }
        },
        handleFileChange1(e) {
            var that = this;
            let file = e.target.files[0]
            let storeAs = new Date().getTime() + "";
            let client = new OSS({
                accessKeyId: "LTAI4FohfP7q2pjSdjmrCeYg",
                accessKeySecret: "I2N6kpIGgmQmsD23TxGU5yFeISCtyU",
                endpoint: "oss-cn-shenzhen.aliyuncs.com",
                bucket: "xxlpic"
            });
            client
                .multipartUpload(storeAs, file)
                .then(function (result) {
                    let str = "http://xxlpic.oss-cn-shenzhen.aliyuncs.com/" + result.name;
                    that.form.t9.push(str);
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        delectImg1(index) {
            this.form.t9.splice(index, 1)
        },
        setTemplent(val) {
            if (!val) {
                this.form.t1 = "";
                this.form.t2 = "";
            }
        },
        onSubmit() {
            if (this.templent) {
                if (this.form.t1 == "") {
                    this.$message("使用静态模板时模板名为必填");
                    return;
                }
            }
            const data = {
                template: this.form.t1, //模板名
                title: this.form.t2, //标题
                paPer: this.form.t3, //简述
                ordNmber: this.form.t4, //排序号
                releaseTime: this.form.t5, //发布时间
                author: this.form.t6, //作者
                clikCount: this.form.t7, //阅读量
                isShow: this.form.t8, //首页展示
                imageUrl: JSON.stringify(this.form.t9), //图片
                details: this.editor.txt.html(), //富文本

                lableId: this.$store.state.columnId //标签id
            };
            if (data.isShow === true) {
                data.isShow = "1";
            } else {
                data.isShow = "0";
            }
            if (this.$store.state.isadd) {
                addArticle(data).then(res => {
                    this.$store.commit("setIsAdd", false);
                    console.log({ 新增文章: res });
                    this.$message("保存成功!");
                    this.goBack();
                });
            } else {
                data.id = this.form.id; //文章id
                editArticle(data).then(res => {
                    this.$message("保存成功!");
                    this.goBack();
                });
            }
        },
        // 查询文章详情
        queryArticle() {
            const data = {
                id: this.$store.state.articleId
            };
            queryArticle(data).then(res => {
                console.log({ 查询文章详情: res });
                this.form.t1 = res.data.template;
                this.form.t2 = res.data.title;
                this.form.t3 = res.data.paPer;
                this.form.t4 = res.data.ordNmber;
                this.form.t5 = res.data.releaseTime;
                this.form.t6 = res.data.author;
                this.form.t7 = res.data.clikCount;
                this.form.t8 = res.data.isShow;
                this.form.t9 = JSON.parse(res.data.imageUrl);
                this.editor.txt.html(res.data.details);
                this.form.id = res.data.id;
                if (res.data.template) {
                    this.templent = true;
                }
                if (this.form.t8 == "0") {
                    this.form.t8 = false;
                } else {
                    this.form.t8 = true;
                }
            });
        },
        delect() {
            const data = {
                id: this.form.id
            };
            delectArticle(data).then(res => {
                this.$message("已删除!");
                this.goBack();
            });
        },
        goBack() {
            this.$router.go(-1);
        }
    }
};
</script>